import 'cube.css/src/scss/neat.scss'
import 'static/font/iconfont.css'
import 'element-ui/lib/theme-default/index.css'
import '@/base/scss/common.scss'
import './frame.scss'
import Vue from 'vue'
import ElementUI from 'element-ui'
import SelectTpl from '../script/index.js'
import UnifyHeader from '@/components/header/header'
import UnifyFooter from '@/components/footer/footer'
import Suspension from 'components/suspension/suspension'
import Api from '@/api.js'
import Utils from '../../components/component/util'
import mixins from '@/mixins'
import {DEVELOPMENT, PRODUCTION} from "../../config"
import $ from 'jquery'
let apiHost = process.env.NODE_ENV === 'development' ? DEVELOPMENT : PRODUCTION

Vue.mixin(mixins)
Vue.use(ElementUI)
let selTpl = new SelectTpl()
Vue.use(Utils)  // 工具函数

//eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    showSuspensionHeight: 0,
    customizationItem: 'border',
    picturePrefix: `http://${apiHost.IMAGE_API_HOST}/`,
    frameSize: {}, //框画的尺寸
    frameTypeData: {}, //框画的类型数据
    frameShowBool: true, //true不选择框画尺寸是显示的dome   -false时候显示选择尺寸dome
    nowSize: '', //当前框的尺寸
    nowType: '', //当前框的类型
    skuCode: '', //用来取价钱的sku
    price: '', //框画的价钱
    borderIdx: 0,
    sizeIdx: 0,
    picSize: 0,
    previewImageUrl: 'static/pc/imgs/kuanghua/400X500-yltlk.jpg', //框形预览图
    frameType: '', //框形
    editImageUrl: '', //编辑框背景图
    skuId: '', //产品的skuid
    templateCode: '', //产品的模板号
    cache: {}
    //editFrameSize : {}//图片编辑框的宽高obj{width,height}
  },
  components: {
    UnifyHeader,
    UnifyFooter,
    Suspension
  },
  methods: {
    suspendPackUp: function () {
      let $el = this.$refs.suspend.$el
      $el.style.height = '38px'
      setTimeout(() => {
        $el.removeAttribute('style')
      }, 20)
    },
    suspendPullDown: function (type) {
      this.customizationItem = type
      let $el = this.$refs.suspend.$el
      $el.style.height = '154px'
    },
    /**
     * 点击更新框画尺寸
     * index: 点击对象的索引
     */
    updateSizeFn(index) {
      if (this.frameShowBool) {
        this.nowType = this.frameTypeData[0]
        this.frameType = this.frameTypeData[0].name
      }
      this.sizeIdx = index
      this.nowSize = this.frameSize[index]
      selTpl.setShowImgSize(`box${this.nowSize.name.substr(0, 1)}`, 'picContainerOne')
      this.updataSkuData(true)
      $(".typeActive").click()
    },
    /**
     * 点击更新框形
     * index：点击对象的索引
     */
    updataTypeFn(index) {
      if (this.frameShowBool) {
        this.nowSize = this.frameSize[0]
      }
      this.bordeIdx = index
      this.nowType = this.frameTypeData[index]
      this.frameType = this.frameTypeData[index].name
      this.updataSkuData(true)
    },
    /*更新sku*/
    updataSkuData(showBool) {
      if (!this.nowSize || !this.nowType) {
        return
      }
      let dataFill = (data) => {
        console.log(data)
        this.picSize = data.picSize
        this.previewImageUrl = data.previewImageUrl //框形预览图
        this.editImageUrl = data.editImageUrl //编辑框背景图
        this.price = data.price
        this.templateCode = data.templateCode
        this.skuId = data.skuId
        if (showBool) {
          this.dynamicAlterUrl({
            size: this.sizeIdx,
            border: this.bordeIdx
          })
          this.frameShowBool = false
        }
      }
      this.skuCode = `${this.getFromSession("category")}.${this.nowSize.code}.${this.nowType.code}`
      if (this.cache[this.skuCode]) {
        dataFill(this.cache[this.skuCode])
      }
      Api.sku.querySku({
        category: this.getFromSession("category"),
        parameter: this.skuCode
      }).then(res => {
        this.cache[this.skuCode] = res.data
        dataFill(res.data)
      })
    },
    /*开始定制*/
    startCustom() {
      if (this.frameShowBool) {
        this.$message({
          showClose: true,
          iconClass: "atrup_Message",
          message: '请先选择您需要定制的尺寸和边框 !',
          type: 'success'
        })
        return
      }
      if (localStorage.getItem('userDbId')) {
        location.href = '/framed/framedEdit?' + this.convertParams({
          size: this.nowSize.code,
          editImageUrl: this.editImageUrl,
          price: this.price,
          frameType: this.frameType,
          category: this.getFromSession("category"),
          skuCode: this.skuCode,
          templateCode: this.templateCode,
          skuId: this.skuId,
          picSize: this.picSize
        })
      } else {
        this.setUrlCallback()
      }
    }
  },
  mounted() {
    let that = this
    sessionStorage.urlQuery = JSON.stringify({
      'category': this.getQueryString('category', 'kuanghua'),
      'defDbId': this.getQueryString('defDbId', '6afedcf6-b0e4-447d-afd9-c70449f42f50')
    })
    //获取框画的类型
    Api.sku.queryAttributes({category: this.getFromSession("category")}).then(res => {
      if (res) {
        this.frameSize = res.data.attributes[1].attributeValues
        this.frameTypeData = res.data.attributes[0].attributeValues
        this.bordeIdx = +this.getQueryString('border', 0)
        this.sizeIdx = +this.getQueryString('size', 0)
        this.nowSize = this.frameSize[this.sizeIdx]
        this.nowType = this.frameTypeData[this.bordeIdx]
        this.updataSkuData(this.sizeIdx || this.bordeIdx)
      }
    })
    this.$nextTick(function () {
      that.showSuspensionHeight = that.$refs.showSuspensionFlag.offsetTop
    })
  },
  created: function () {
    this.checkWebpFeature('lossy', function (feature, isSupport) {
      if (isSupport) {
        require('./background-webp.scss')
      } else {
        require('./background-png.scss')
      }
    })
    document.body.style.cssText = 'opacity:1'
  }
})
